<template>
    <div class="page">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            size="default" status-icon>
            <el-form-item label="广告名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="广告位置" prop="type">
                <el-select v-model="ruleForm.type" placeholder="全部">
                    <el-option label="PC首页轮播" :value="0" />
                    <el-option label="APP首页轮播" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间" required prop="startTime" :locale="zhCn">
                <div class="block">
                    <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期" />
                </div>
            </el-form-item>
            <el-form-item label="到期时间" required prop="endTime" :locale="zhCn">
                <div class="block">
                    <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期" />
                </div>
            </el-form-item>
            <el-form-item label="上线/下线" prop="status">
                <el-radio-group v-model="ruleForm.status">
                    <el-radio label="下线" :value=0 />
                    <el-radio label="上线" :value=1 />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="广告图片" prop="pic">
                <el-upload ref="uploadRef" v-model:file-list="fileList" class="upload-demo" multiple :limit="1"
                    list-type="picture" action="blob:http://127.0.0.1:5173" :on-preview="handlePictureCardPreviewOne"
                    :on-success="handleSuccess" :on-exceed="handleExceed">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件, 且不超过100kb
                        </div>
                    </template>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="logoList" alt="Preview Image" />
                    </el-dialog>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="广告链接" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item label="广告备注" prop="note">
                <el-input v-model="ruleForm.note" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateAdvertise">
                    提交
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules, genFileId } from 'element-plus'
import type {
    UploadFile,
    UploadFiles,
    UploadProps,
    UploadUserFile,
    UploadInstance,
    UploadRawFile,
} from "element-plus";
import { AdvertiseAPI, updateAdvertiseAPI } from './api'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn'
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()

const fileList = ref<UploadUserFile[]>([]);
const logoList = ref<string>("");
const uploadRef = ref<UploadInstance>();
const dialogVisible = ref<boolean>(false);

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<AdsList>({
    clickCount: 0,
    endTime: '',
    id: 0,
    name: '',
    note: '',
    orderCount: 0,
    pic: '',
    sort: 0,
    startTime: '',
    status: 0,
    type: 0,
    url: '',
})

// 请求数据
if (route.query.id) {
    AdvertiseAPI(parseInt(route.query.id as string)).then((res) => {
        ruleForm.value = res.data;
        fileList.value.push({ name: res.data.name, url: res.data.pic });
    });
}

const handlePictureCardPreviewOne: UploadProps["onPreview"] = (uploadFile) => {
    logoList.value = uploadFile.url!;
    dialogVisible.value = true;
};

const handleExceed = (files: File[]) => {
    uploadRef.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    uploadRef.value!.handleStart(file);
};

const handleSuccess = (response: any, uploadFile: UploadFile) => {
    console.log(uploadFile);
    ruleForm.value.pic = uploadFile.url! as string;
};

const routeParams=route.query

// 编辑请求
const updateAdvertise = () => {
    ElMessageBox.confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            updateAdvertiseAPI(routeParams, ruleForm.value).then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "修改成功",
                    });
                    router.back()
                }

            });
        })
        .catch(() => { });
}

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入广告名称', trigger: 'blur' },
    ],
    startTime: [
        {
            required: true,
            message: '请选择开始时间',
            trigger: 'blur',
        },
    ],
    endTime: [
        {
            required: true,
            message: '请选择到期时间',
            trigger: 'blur',
        },
    ],
    url: [
        {
            required: true,
            message: '请输入广告链接',
            trigger: 'blur',
        },
    ]
})

</script>
<style lang="less" scoped>
.page {
    width: 680px;
    height: 625px;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    margin: 0 auto;
}
</style>
